$(document).ready(function () {
  // 技能进度条动画
  function animateSkills() {
    $('.skill-progress').each(function () {
      const $this = $(this);
      const width = $this.css('width');
      $this.css('width', '0');
      $this.animate(
        {
          width: width,
        },
        1500,
      );
    });
  }

  // 当技能区域进入视口时触发动画
  const skillsObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        animateSkills();
        skillsObserver.unobserve(entry.target);
      }
    });
  });

  skillsObserver.observe($('.skills-section')[0]);

  // 统计数据动画
  function animateStats() {
    $('.stat-value').each(function () {
      const $this = $(this);
      const value = $this.text();
      const isPlus = value.includes('+');
      const numericValue = parseInt(value);

      $this.text('0');
      $({ counter: 0 }).animate(
        {
          counter: numericValue,
        },
        {
          duration: 2000,
          step: function () {
            $this.text(Math.floor(this.counter) + (isPlus ? '+' : ''));
          },
        },
      );
    });
  }

  // 当统计区域进入视口时触发动画
  const statsObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        animateStats();
        statsObserver.unobserve(entry.target);
      }
    });
  });

  statsObserver.observe($('.profile-stats')[0]);

  // 时间轴动画
  function animateTimeline() {
    $('.timeline-item').each(function (index) {
      $(this)
        .css({
          opacity: 0,
          transform: 'translateX(-20px)',
        })
        .delay(index * 200)
        .animate(
          {
            opacity: 1,
            transform: 'translateX(0)',
          },
          800,
        );
    });
  }

  // 当时间轴区域进入视口时触发动画
  const timelineObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        animateTimeline();
        timelineObserver.unobserve(entry.target);
      }
    });
  });

  timelineObserver.observe($('.timeline')[0]);

  // 兴趣爱好动画
  function animateInterests() {
    $('.interest-item').each(function (index) {
      $(this)
        .css({
          opacity: 0,
          transform: 'translateY(20px)',
        })
        .delay(index * 100)
        .animate(
          {
            opacity: 1,
            transform: 'translateY(0)',
          },
          500,
        );
    });
  }

  // 当兴趣爱好区域进入视口时触发动画
  const interestsObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        animateInterests();
        interestsObserver.unobserve(entry.target);
      }
    });
  });

  interestsObserver.observe($('.interests-section')[0]);

  // 社交链接悬停效果
  $('.social-item').hover(
    function () {
      $(this).find('.social-icon').css('transform', 'scale(1.2)');
    },
    function () {
      $(this).find('.social-icon').css('transform', 'scale(1)');
    },
  );

  // 技术标签点击效果
  $('.tech-tag').click(function () {
    const tag = $(this).text();
    alert(`查看更多关于 ${tag} 的项目和文章`);
  });

  // 项目展示点击效果
  $('.project-item').click(function () {
    const title = $(this).find('h4').text();
    const description = $(this).find('p').text();
    alert(`${title}\n${description}\n\n点击查看项目详情`);
  });

  // 头像悬停效果
  let rotateInterval;
  $('.profile-avatar').hover(
    function () {
      const $avatar = $(this).find('.avatar-image');
      let degree = 0;
      rotateInterval = setInterval(() => {
        degree = (degree + 1) % 360;
        $avatar.css('transform', `rotate(${degree}deg)`);
      }, 20);
    },
    function () {
      clearInterval(rotateInterval);
      $(this).find('.avatar-image').css('transform', 'rotate(0deg)');
    },
  );

  // 页面滚动进度
  $(window).scroll(function () {
    const scrollTop = $(window).scrollTop();
    const docHeight = $(document).height();
    const winHeight = $(window).height();
    const scrollPercent = (scrollTop / (docHeight - winHeight)) * 100;

    // 创建或更新进度条
    let $progressBar = $('.scroll-progress');
    if ($progressBar.length === 0) {
      $progressBar = $('<div class="scroll-progress"></div>').appendTo('body');
    }

    $progressBar.css('width', scrollPercent + '%');
  });
});
